Add work-in-progress new TopNav component - #3267
Conversation
|
Pull request environment is available at https://stoctodocspr3267.z22.web.core.windows.net. You can view the ephemeral environment status in Octopus Deploy. This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity. |
79d12dd to
64f2438
Compare
64f2438 to
7be65b1
Compare
| </div> | ||
| <div class="top-nav__trailing"> | ||
| <!-- All of these are just non-functional and for visual/presentation only at this stage --> | ||
| <Button icon="fa-regular fa-moon" aria-label="Switch to dark theme" /> |
There was a problem hiding this comment.
I expected fa-regular fa-moon to be the outline like their website says, but it's exactly the same as solid 🤔 Not sure why, but I'm just leaving this as a placeholder for now anyhow, as I'm just trying to get the layout right at this early stage.
| /* TODO: drop these once color.nav.background.* are available in design-system-tokens */ | ||
| --colorNavBackgroundRest: rgb(from var(--colorScalesBlue500) r g b / 0); | ||
| --colorNavBackgroundHover: var(--colorScalesSlate100); | ||
| --colorNavBackgroundActive: rgb(from var(--colorScalesBlue500) r g b / 0.06); |
There was a problem hiding this comment.
I believe I need the design folks to get these added on my behalf, that would be appreciated whenever possible 🙇
There was a problem hiding this comment.
@rosslovas I'll work with design team next week to make these available
There was a problem hiding this comment.
- dark mode as well
I assume that these ones: https://github.com/OctopusDeploy/OctopusDeploy/blob/main/frontend/packages/design-system-tokens/src/generated/lightTheme.css#L136-L144
are not for "top menu" but for Area Nav List? instead.
There was a problem hiding this comment.
Those are only for in-product navigation. We won't be using the same for the docs site :)
There was a problem hiding this comment.
Looks pixel perfect 🤩 thanks @rosslovas!
Also just noting, I know I haven't provided a responsive layout for the nav yet, but since this is an early implementation, we can add it later.
4 participants
Summary
Adds an early stage implementation of an upcoming
TopNavredesign.No functionality is implemented, just visuals. Only the signed-out variant is implemented, and the search bar is entirely unimplemented.
Results
Target design:
As implemented:
See it in action at https://stoctodocspr3267.z22.web.core.windows.net/components#topnav
Variations of note from the original design:
DocsandStart for freetext are weight600rather than700, which was discussed and agreed upon as 600 matches the intended tokens.